<template>
	<view class="container">
		<view class="user-section">
			<view class="user-info-box">
				<view class="portrait-box">
					<image @click="toLogin" class="portrait" :src="userInfo.imageUrl ? userInfo.imageUrl : '/static/missing-face.png'"></image>
				</view>
				<view class="info-box">
					<text @click="toLogin" class="username">{{hasLogin ? (userInfo.nickName || '未设置昵称') : '立即登录'}}</text>
					<text v-if="userInfo.phone" class="userphone">{{userInfo.phone}}</text>
				</view>
			</view>
			<view class="vip-card-box">
				<text class="tit" v-if="isAuth">已认证</text>
				<text class="tit" v-else-if="userInfo.userType == 3">待审核</text>
				<text class="tit" v-else @click="navTo('/pages/public/step01')">未认证</text>
			</view>
		</view>

		<!-- 订单 -->
		<view class="order-section">
			<view class="order-sub" @click="navTo('/pages/order/list?state=0')" hover-class="common-hover" :hover-stay-time="50">
				<text class="icon icon-order"></text>
				<text>全部订单</text>
			</view>
			<view class="order-sub" @click="navTo('/pages/order/list?state=1')" hover-class="common-hover" :hover-stay-time="50">
				<text class="icon icon-pay"></text>
				<text>待付款</text>
			</view>
			<view class="order-sub" @click="navTo('/pages/order/list?state=4')" hover-class="common-hover" :hover-stay-time="50">
				<text class="icon icon-fahuo"></text>
				<text>待收货</text>
			</view>
			<view class="order-sub" @click="navTo('/pages/order/list?state=8')" hover-class="common-hover" :hover-stay-time="50">
				<text class="icon icon-shouhou"></text>
				<text>退款/售后</text>
			</view>
		</view>

		<view class="cover-container">
			<view class="history-section">
				<list-cell icon="icon-guige" iconColor="#ff0000" title="招标中心" @eventClick="navTo('/pages/bid/owner')"></list-cell>
				<list-cell icon="icon-record" iconColor="#0099ff" title="招标记录" @eventClick="navTo('/pages/bid/old')"></list-cell>
				<list-cell icon="icon-region" iconColor="#5fcda2" title="地址管理" @eventClick="navTo('/pages/address/list')"></list-cell>
				<list-cell icon="icon-message" iconColor="#e07472" title="在线客服" @eventClick="navTo('/pages/contact/contact')"></list-cell>
				<list-cell icon="icon-user" iconColor="#ee883b" title="关于我们" @eventClick="navTo('/pages/user/about')"></list-cell>
				<list-cell icon="icon-wechat" iconColor="#1afa29" title="商家版" @eventClick="navTo('/pages/ex/index/index')"></list-cell>
				<list-cell icon="icon-link_arrow" iconColor="#e07472" title="退出登录" @eventClick="logout()"></list-cell>
			</view>
		</view>

	</view>
</template>
<script>
	import listCell from '@/components/mix-list-cell.vue'
	import {
		mapState
	} from 'vuex'
	let startY = 0,
		moveY = 0,
		pageAtTop = true
	export default {
		components: {
			listCell
		},
		data() {
			return {
				coverTransform: 'translateY(0px)',
				coverTransition: '0s',
				moving: false,
				footprintList: [],
				isAuth: false
			}
		},
		onShow() {
			this.isAuth = this.$api.isAuth()
		},
		onLoad() {
			if (this.hasLogin) {
				this.$api.request('/zruser/testToken', {}, {
					method: 'GET',
					contetn: 'application/x-www-form-urlencoded'
				}).then(res => {
					let userInfo = res.data
					userInfo.token = this.userInfo.token
					this.$store.commit('login', userInfo)
				})
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		methods: {
			toLogin() {
				if (!this.hasLogin) {
					uni.navigateTo({
						url: '/pages/public/login'
					})
				} else {
					uni.navigateTo({
						url: '/pages/user/profile'
					})
				}
			},
			logout() {
				uni.showModal({
					title: '询问',
					content: '您确定要退出吗?',
					cancelText: '取消',
					confirmText: '确定',
					success: (e) => {
						if (e.confirm) {
							this.isAuth = false
							this.$store.commit('logout')
							this.$api.logout()
						}
					}
				})
			},
			/**
			 * 统一跳转接口,拦截未登录路由
			 * navigator标签现在默认没有转场动画，所以用view
			 */
			navTo(url) {
				if (!this.hasLogin) {
					url = '/pages/public/login'
				} 
				uni.navigateTo({
					url
				})
			},
		}
	}
</script>
<style lang='scss'>
	%flex-center {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	%section {
		display: flex;
		justify-content: space-around;
		align-content: center;
		background: #fff;
		border-radius: 10upx;
	}

	.user-section {
		height: 460upx;
		padding: 30upx 30upx 0;
		position: relative;
		background: #0251F4 url('') no-repeat center center;
		background-size: 100% 100%;
	}

	.user-info-box {
		height: 100upx;
		display: flex;
		align-items: center;
		position: relative;
		z-index: 1;

		.portrait {
			vertical-align: top;
			width: 100upx;
			height: 100upx;
			border: 5upx solid #fff;
			border-radius: 50%;
		}

		.username {
			display: block;
			font-size: $base-font-base;
			color: #fff;
			margin-left: 20upx;
		}

		.userphone {
			display: block;
			font-size: $base-font-sm;
			color: #fff;
			margin-left: 20upx;
		}
	}

	.vip-card-box {
		position: absolute;
		right: 0;
		top: 55upx;
		z-index: 100;

		.tit {
			display: block;
			width: 140upx;
			font-size: $base-font-sm;
			color: $base-color-dark;
			line-height: 60upx;
			text-align: center;
			border-radius: 32upx 0 0 32upx;
			background-color: #fff;
		}
	}

	.cover-container {
		background: $base-color-bg;
		padding: $base-row-spacing;
		position: relative;
		background: $base-color-bg;

		.arc {
			position: absolute;
			left: 0;
			top: -34upx;
			width: 100%;
			height: 36upx;
		}
	}

	.tj-sction {
		@extend %section;

		.tj-item {
			@extend %flex-center;
			flex-direction: column;
			height: 140upx;
			font-size: $base-font-sm;
			color: #75787d;
		}

		.num {
			font-size: $base-font-lg;
			color: $base-color-dark;
			margin-bottom: 8upx;
		}
	}

	.order-section {
		@extend %section;
		position: relative;
		z-index: 10;
		margin: -300upx $base-row-spacing 30upx;
		padding: 30upx 0;

		.order-sub {
			@extend %flex-center;
			width: 120upx;
			height: 120upx;
			border-radius: 10upx;
			font-size: $base-font-sm;
			color: $base-color-dark;
		}

		.icon {
			font-size: 48upx;
			margin-bottom: 10upx;
			color: #fa436a;
		}

		.icon-shouhoutuikuan {
			font-size: 44upx;
		}
	}

	.history-section {
		overflow: hidden;
		background: #fff;
		border-radius: 10upx;
	}
</style>
